<template>
	<view class="uni-city-selector">
		<view class="select-value" @click="open">
			<slot></slot>
		</view>
		<uni-popup ref="selectPopup" type="bottom">
			<view class="popup-inner">
				<view class="select-head">
					<view class="select-title">地点</view>
					<view class="iconfont icon-close"  @click="close"></view>
				</view>
				<view class="select-body">
					<scroll-view class="province-options" scroll-y>
						<view class="option" :class="{'selected': selectProvince && item.name == selectProvince.name}" @click="changeProvince(item)" v-for="(item, idx) in items" :key="idx">{{item.name}}</view>
					</scroll-view>
					<scroll-view class="city-options" scroll-y v-if="selectProvince">
						<view class="option" :class="{'selected': selectCity && item.name == selectCity.name}" @click="changeCity(item)" v-for="(item, idx) in selectProvince.children" :key="idx">{{item.name}}</view>
					</scroll-view>
					<scroll-view class="district-options" scroll-y v-if="showDistrict && selectCity">
						<view class="option" :class="{'selected': selectDistrict && item.name == selectDistrict.name}" @click="changeCity(item)" v-for="(item, idx) in selectCity.children" :key="idx">{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="btn-box">
					<button class="btn-cancel" @click="clear">清空</button>
					<button class="btn-confirm" @click="onConfirm" :disabled="btnDisabled">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"uni-city-selector",
		props:{
			city:{
				type: String
			},
			showDistrict:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				fieldIndex: 0,
				items: [],
				selectProvince: null,
				selectCity: null,
				selectDistrict: null
				
			};
		},
		created() {
			this.loadData();
		},
		computed:{
			btnDisabled(){
				return this.showDistrict ? !this.selectDistrict : !this.selectCity;
			}
		},
		methods:{
			open(){
				uni.hideTabBar()
				this.$refs.selectPopup.open();
				
			},
			close(){
				uni.showTabBar()
				this.$refs.selectPopup.close();
			},
			/**
			 * 监听变更
			 * @param {Object} e
			 */
			onChange(e){
				
			},
			/**
			 * 确认
			 * @param {Object} e
			 */
			onConfirm(e){
				this.$emit('change', {
					value: this.showDistrict ? this.selectDistrict : this.selectCity
				});
				this.close();
			},
			clear(e){
				this.$emit('clear');
				this.close();
				this.selectProvince = null;
				this.selectCity = null;
				this.selectDistrict = null;
			},
			/**
			 * 加载数据
			 * @param {Object} value
			 */
			loadData(value) {
				this.$api.appService.regions().then(res => {
					this.items = res.items;
				});
			},
			
			/**
			 * 变更省份
			 * @param {Object} province
			 */
			changeProvince(province){
				if(this.selectProvince && province && province.id == this.selectProvince.id){
					return ;
				}
				this.selectProvince = province;
				this.selectCity = null;
				this.selectDistrict = null;
				
			},
			/**
			 * 变更城市
			 * @param {Object} city
			 */
			changeCity(city){
				if(this.selectCity && city && city.id == this.selectCity.id){
					return ;
				}
				this.selectCity = city;
				this.selectDistrict = null;
			},
			/**
			 * 变更区县
			 * @param {Object} district
			 */
			changeDistrict(district){
				if(this.selectDistrict && district && district.id == this.selectDistrict.id){
					return ;
				}
				this.selectDistrict = district;
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-inner{	
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	width: 100%;
	background-color: #FFFFFF;
	
}
.select-head{
	display: flex;
	height:124rpx;
	line-height: 124rpx;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #0A1738;
	padding:0 32rpx;
	justify-content: space-between;
	.icon-close{
		font-size:24rpx;
		height: 48rpx;
		line-height: 50rpx;
		width: 48rpx;
		text-align: center;
	}
}
.select-body{
	height: 896rpx;
	display: flex;
	.province-options{
		background:#F7F7F7;
		height: 896rpx;
		width: 248rpx;
		.option{
			height: 104rpx;
			width: 248rpx;
			overflow: hidden;
			font-size: 28rpx;
			font-weight: 400;
			color: #0A1738;
			padding-left:52rpx;
			box-sizing: border-box;
			line-height: 104rpx;
			
			&.selected{
				color: $uni-color-primary;
				position: relative;
				font-weight: 500;
				&::before{
					content: '';
					display: block;
					height: 40rpx;
					width: 6rpx;
					position: absolute;
					left: 0;
					top:50%;
					margin-top:-20rpx;
					background-color: $uni-color-primary;
				}
			}
		}
	}
	
	.city-options{
		height: 896rpx;
		width: 248rpx;
		.option{
			height: 104rpx;
			width: 248rpx;
			overflow: hidden;
			font-size: 28rpx;
			font-weight: 400;
			color: #0A1738;
			padding-left:52rpx;
			box-sizing: border-box;
			line-height: 104rpx;
			
			&.selected{
				color: $uni-color-primary;
				position: relative;
				font-weight: 500;
				&::before{
					content: '';
					display: block;
					height: 40rpx;
					width: 6rpx;
					position: absolute;
					left: 0;
					top:50%;
					margin-top:-20rpx;
					background-color: $uni-color-primary;
				}
			}
		}
	}
}
.btn-box{
	display: flex;
	justify-content: center;
	padding:30rpx 0;
	
	button{
		width:240rpx;
		height: 80rpx;
		padding:0rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
		letter-spacing: 1rpx;
		margin:0 10rpx;
	}
	
	.btn-cancel{
		background:#FFFFFF;
		border:2rpx solid $uni-color-primary;
		color:$uni-color-primary;
	}
	.btn-confirm{
		background: $uni-color-primary;
		border:2rpx solid $uni-color-primary;
		color:#FFFFFF;
	}
	
	[disabled]{
		color: rgba(0,0,0,.3);
		background-color: #f7f7f7;
		border:2rpx solid #f7f7f7;
	}
}

</style>